<template>
  <div class="apiadd">
    <el-card shadow="never" class="addenvTop">
      <el-row class="search">
        <el-col :span="10">
          <div class="addtitle">
            <i class="el-icon-receiving"></i>
            <span>添加新接口信息</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="hover" class="addmain">
      <el-row>
        <el-col :span="13" :offset="3">
          <el-form
            ref="apiFrom"
            :model="apiFrom"
            :rules="rules"
            class="apiFrom"
            label-width="100px"
          >
            <el-form-item label="接口名称" prop="name">
              <el-input v-model="apiFrom.name"></el-input>
            </el-form-item>

            <el-form-item label="接口类型">

              <el-select v-model="apiFrom.apimethod" placeholder="请选择">
                <el-option
                  v-for="item in apiType"
                  :key="item.id"
                  :label="item.method"
                  :value="item.method"
                ></el-option>
              </el-select>

            </el-form-item>

            <el-form-item label="接口路径">
              <el-input v-model="apiFrom.api"></el-input>
            </el-form-item>

            <el-form-item label="请求头">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="apiFrom.headers"
              ></el-input>
            </el-form-item>

            <el-form-item label="请求体">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="apiFrom.body"
              ></el-input>
            </el-form-item>

            <el-form-item label="返回值">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 5}"
                v-model="apiFrom.response"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { addApi, getApitype } from "@/network/networks";
export default {
  data() {
    return {
      apiFrom: {
        name: "",
        apimethod: "",
        catid_id: 0,
        api: "",
        headers: "",
        body: "",
        response: ""
      },
      apiType: [],
      rules: {
        name: [
          { required: true, message: "请输入接口名称", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },

  mounted() {
    this.apiFrom.catid_id = this.$route.params.nodeid;
    getApitype()
      .then(res => {
        if (res.code == 0) {
          this.$message.error(res.msg);
          return;
        }
        this.apiType = res.data;
      })
      .catch(err => {
        this.$message.error(err);
      });
  },

  methods: {
    onSubmit() {
      this.$refs["apiFrom"].validate(valid => {
        if (!valid) {
          return;
        }
        addApi(this.apiFrom)
          .then(res => {
            if (res.code == 1) {
              this.$message.success(res.msg);
              this.$router.push("/apimanage");
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.$message.error(err);
          });
      });
    },

    onCancel() {
      this.$router.push("/apimanage");
    }
  }
};
</script>

<style lang="less" scoped>
.addtitle {
  font-size: 28px;
  color: #409eff;

  span {
    padding-left: 10px;
  }
}

.addmain {
  margin-top: 10px;
  padding: 30px 0;
}
</style>